<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优惠券管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
    <script src="layui/layui.js"></script>
    <script>var $ = layui.jquery;</script>
</head>

<body>

<table class="layui-hide" id="cpnList" lay-filter="cpnList"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="newCpn">新建优惠券</button>
        <button class="layui-btn layui-btn-sm" lay-event="exportCpn">导出全部</button>

    </div>
</script>

<script type="text/html" id="barDemo">

    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>
</script>

<!--   这里的 checked 的状态只是演示 {{ d.id == 10003 ? 'checked' : '' }}-->
<script type="text/html" id="switchTpl">
    {{# if(d.inUse){}}
    <input type="checkbox" name="sxj" value="{{d.id}}" lay-skin="switch"
           checked="checked" lay-text="上架|下架" lay-filter="sexDemo">
    {{# } else { }}
    <input type="checkbox" name="sxj" value="{{d.id}}" lay-skin="switch"
           lay-text="上架|下架" lay-filter="sexDemo">
    {{# } }}

</script>

<script>
    // 'layer' //把这个放下面是错的
    layui.use(['table', 'layer'], function () {
        //声明变量,获取layui中自带的组件
        var table = layui.table
            , $ = layui.jquery
            , form = layui.form
            , layer = layui.layer;

        //表格的渲染
        table.render({

            elem: '#cpnList' //渲染的目标
            // ,url:'cpnList.json'  //请求数据的地址:/cp
            , url: '/cp'  //请求数据的地址:/cp
            , headers: {"method": "selectByPage"}
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            // ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            //     title: '提示'
            //     ,layEvent: 'LAYTABLE_TIPS'
            //     ,icon: 'layui-icon-tips'
            // }]
            , title: '优惠券详情数据表'
            , cols: [[
                {type: 'checkbox'}
                , {field: 'id', title: '序号', width: 100, align: 'center', unresize: true, sort: true}
                , {field: 'name', title: '名称', align: 'center', width: 150}
                , {field: 'colletExpire', title: '领用有效期', align: 'center', width: 180, sort: true}
                , {field: 'useExpire', title: '使用有效期', align: 'center', width: 180, sort: true}
                , {field: 'sex', title: '上下架操作', width: 180, align: 'center', templet: '#switchTpl', unresize: true}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', align: 'center', width: 250}
            ]]
            , page: true //开启分页
        });


        //头工具栏事件
        //给id为cpnList的table绑定事件,监听toolbar顶部工具栏上的所有操作
        table.on('toolbar(cpnList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'newCpn':
                    // var data = checkStatus.data;
                    // layer.alert(JSON.stringify(data));
                    //用layer弹层打开新建优惠券窗口
                    layer.open({
                        type: 2
                        , title: '新建优惠券'
                        , resize: false
                        , shadeClose: true
                        , area: ['520px', '520px']
                        , content: 'cpnAdd.html'
                        , maxmin: true
                        , closeBtn: 1
                        , success: function (layero) {
                            // layero.find('.layui-layer-content').css('overflow', 'visible');
                            //
                            // form.render().on('submit(*)', function(data){
                            //     layer.msg(JSON.stringify(data.field));
                            // });
                            //这里写json数据的传值,把父类传给子界面
                        }
                        , end: function () {   // 当关闭弹层时 , table刷新
                            location.reload();
                        }
                    });

                    break;
                    //这里就是导出按钮的位置
                case 'exportCpn':

                    var a = document.createElement('a'); // 创建一个a标签
                    a.download = '优惠券清单.xls';//a标签的下载属性, 并指定下载的文件名
                    // window.location.href="/export";
                    a.href = '/export';  // 指定接口,并由servlet提供下载
                    document.body.appendChild(a); // 将a标签利用dom方法追加到页面中
                    a.click();  // 执行a标签的点击
                    document.body.removeChild(a);  // 点击执行完毕就删除a标签

                    //
                    // var data = checkStatus.data;
                    // layer.msg('选中了：' + data.length + ' 个');
                    break;

            }
            ;
        });
        //监听上下架操作
        layui.form.on('switch(sexDemo)', function (obj) {
            var id = this.value;
            if (obj.elem.checked) {
                layer.confirm('确认上架吗？', function (index) {
                    off_on(id, 'on');
                    layer.close(index);
                    // parent.location.reload();//重新加载父页面表格
                }, function () {
                    //取消和关闭窗口操作
                    //点击取消，将状态改回下架状态
                    //无效
                    $("input[name=sxj]").removeAttr('checked');
                });
            } else {
                layer.confirm('确认下架吗？', function (index) {
                    off_on(id, 'off');
                    layer.close(index);
                }, function () {
                    //无效
                    $("input[name=sxj]").attr('checked', 'checked');
                });
            }
        });

        //监听行工具事件
        table.on('tool(cpnList)', function (obj) {
            var data = obj.data;
            console.log(obj)

            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 2
                    , resize: false
                    , title: '详情'
                    , resize: false
                    , shadeClose: true
                    , area: ['520px', '520px']
                    , maxmin: true
                    , closeBtn: 1
                    , content: 'cpnDetail.html'
                    , success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        body.find('input[name=name]').val(data.name)
                        body.find('input[name=desc]').val(data.desc)
                        body.find('input[name=colletExpire]').val(data.colletExpire)
                        body.find('input[name=useExpire]').val(data.useExpire)
                        body.find('textarea[name=role]').val(data.role)
                        body.find('img#img').attr('src', data.img)

                    }
                    , end: function () {   // 当关闭弹层时 , table刷新
                        location.reload();
                    }
                });
            }
        });
    });
</script>

<script>
    function off_on(id, offon) {
        $.ajax({
            url: "/coupon"
            , type: "post"
            , headers: {"method": offon}
            , data: {"id": id}
            , dataType: "json"
            , success: function (result) {
                layer.msg(result.msg);
            }
        })
    }
</script>
<!--  修改监听-->
<script>
    layui.use('form', function () {
        var $ = layui.jquery;
        var form = layui.form;
        //监听提交
        form.on('submit(update)', function (data) {
            // console.log(data);
            // return false;addData
            //开始传值请求
            $.ajax({
                url: "/cp"
                , type: "post"
                , headers: {"method": "upData"}
                , dataType: "json"
                , data: {"formData": JSON.stringify(data.field)}  //前端的所有字段
                , success: function (result) {   // result就是服务器响应之后返回的数据

                    if (result.code == 0) {
                        alert(result.msg);
                        // alert("添加成功")
                    } else {
                        // alert("添加失败")
                        alert(result.msg);
                    }

                }
                , error: function (e) {
                    console.log(e)
                }
            })
            return false;
        });

    });


</script>

</body>


</html>